<template>
    <view class="rule_container">
        <view class="rule_title"> 等级规则 </view>
        <view class="item" v-for="item in state.levelRule" :key="item.id">
            <view class="item_level">
                <view class="level">{{ item.dtbLevelName }}</view>
            </view>
            <view class="item_desc">
                权益: 自购返佣, {{ item.plugScale }}%推广奖励<text v-if="state.inviteSwitch"
                    >, {{ item.inviteScale }}%邀请奖励
                </text>
            </view>
            <view v-for="(it, i) in item.ruleArr" :key="it" class="item_desc">
                <text :class="i > 0 ? 'opacity' : ''">条件: </text>{{ it }}</view
            >
        </view>
    </view>
</template>

<script setup>
import { watch, reactive } from 'vue';

const props = defineProps({
    data: { type: Object, default: () => ({}) }
});
const state = reactive({});
watch(
    () => props.data,
    v => Object.assign(state, v),
    { immediate: true }
);
</script>

<style lang="scss" scoped>
.rule_container {
    padding: 29rpx;
    padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
}
.rule_title {
    display: flex;
    align-items: center;
    margin-bottom: 29rpx;
    font-size: 29rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    &::before {
        content: '';
        display: block;
        width: 5rpx;
        height: 29rpx;
        margin-right: 11rpx;
        background: #fe292b;
        border-radius: 3rpx;
    }
}
.item {
    margin-bottom: 36rpx;
    .item_level {
        display: flex;
        height: 58rpx;
        line-height: 58rpx;
        margin-bottom: 29rpx;
        .level {
            padding: 0 34rpx;
            background: #36302c;
            border-radius: 29rpx;
            font-size: 25rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #fff0d6;
        }
    }
    .item_desc {
        font-size: 25rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 36rpx;
        .opacity {
            opacity: 0;
        }
    }
}
</style>
